<template>
  <div class="v-c-page">
      <div v-if="showList" class="v-c-nav">
          <div class="d-flex d-flex-between d-flex-middle px20 mb15 mt20">
              <div class="d-flex d-flex-milddle pr10">
                  <div class="mr10">
                      <a-input placeholder="请输入商品名称" allowClear />
                  </div>
                  <div class="mr10">
                    <a-select v-model:value="queryForm.orderStatus" placeholder="请选择类别">
                      <a-select-option value=""><span class="color-hold">请选择类别</span></a-select-option>
                      <a-select-option value="0">蔬菜</a-select-option>
                      <a-select-option value="2">水果</a-select-option>
                    </a-select>
                  </div>
                  <a-button type="primary" class="radius6" @click="ajaxQuery">查询</a-button>
              </div>
              <a-button type="primary" class="radius6" @click="toEdite">新增</a-button>
          </div>
          <div class="table-wrapper">
              <a-table rowKey="id" :columns="colums" :pagination="false" :scroll="{ x: '1150px'}" tableLayout="auto" :loading="tableLoading" :data-source="tableData">
                  <template v-slot:bodyCell="{column,record,index}">
                    <template v-if="column.dataIndex === 'gender'">
                      {{record.gender == 1?'男':'女'}}
                    </template>
                    <template v-if="column.dataIndex === 'disabledFlag'">
                          <em :class="record.disabledFlag?'color-green':'color-warn'">{{record.disabledFlag?'启用':'禁用'}}</em>
                    </template>
                    <template v-if="column.dataIndex === 'audit'">
                          <button class="ant-btn is-plain sm" :class="record.disabledFlag?'ant-btn-warning':'ant-btn-success'">
                              <span>{{record.disabledFlag?'禁用':'启用'}}</span>
                          </button>
                    </template>
                    <template v-if="column.dataIndex === 'operate'">
                          <button class="ant-btn ant-btn-primary is-plain sm mr10"><span>编辑</span></button>
                          <a-popconfirm
                            title="确定删除该用户？"
                            ok-text="删除"
                            cancel-text="取消"
                            @confirm="deleteAct"
                          >
                            <button class="ant-btn ant-btn-danger is-plain sm"><span>删除</span></button>
                          </a-popconfirm>
                    </template>
                  </template>
              </a-table>
              <div class="d-flex d-flex-end mt30 mr30 mb30">
                  <a-pagination
                    size="default"
                    v-model:current="queryForm.pageNo"
                    v-model:pageSize="queryForm.pageSize"
                    @change="ajaxQuery"
                    :total="total"
                    :show-total="() => `共 ${total} 条`"
                  />
              </div>
          </div>
      </div>
      <div class="p30" v-else>
          <div class="d-flex d-flex-middle color-000 cursor" @click="editeBack">
            <svg class="icon" style="width: 1.3em;height: 1.3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1718"><path d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z" fill="#111111" p-id="1719"></path></svg>
            <span>返回</span>
          </div>
          <div class="save">
            <div class="sec d-flex d-flex-middle">
              <span class="label">商品名称</span>
              <a-input placeholder="请输入商品名称"></a-input>
            </div>
            <div class="sec d-flex d-flex-middle">
              <span class="label">商品单位</span>
              <a-input placeholder="请输入商品单位"></a-input>
            </div>
            <div class="sec d-flex d-flex-middle">
              <span class="label">商品类别</span>
              <a-select
                size="large"
                style="width:300px;"
                placeholder="请商品类别"
						  >
						    <a-select-option value=""><span class="color-hold">请选择商品类别</span></a-select-option>
              </a-select>
            </div>
            <div class="sec d-flex d-flex-middle">
              <span class="label">商品库存</span>
              <a-input placeholder="请输入商品库存"></a-input>
            </div>
            <div class="sec d-flex a-center">
              <span class="label"></span>
              <div><a-button class="mr20" type="primary" style="width:140px">保存</a-button></div>
            </div>
          </div>
      </div>
  </div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted,computed } from 'vue';
import dayjs from 'dayjs';
let showList= ref(true)
const colums = ref([
  {
    title: '姓名',
    dataIndex: 'actualName',
  },{
    title: '手机号',
    dataIndex: 'phone',
  },{
    title: '性别',
    dataIndex: 'gender',
  },{
    title: '登录账号',
    dataIndex: 'loginName',
  },{
    title: '角色',
    dataIndex: 'roleName'
  },{
    title: '部门',
    dataIndex: 'departmentName'
  },{
    title: '状态',
    dataIndex: 'disabledFlag'
  },{
    title: '是否启用',
    dataIndex: 'audit'
  },{
    title: '操作',
    dataIndex: 'operate'
  }
]);
const queryFormState = {
  id:'',
  pageNo: 1,
  pageSize: 8,
}
const queryForm = reactive({ ...queryFormState });
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0);
async function ajaxQuery() {
  total.value = 1
  tableData.value = [
    {
      "employeeId": 44,
      "loginName": "zhuoda",
      "gender": 1,
      "actualName": "卓大",
      "phone": "18637925892",
      "departmentId": 1,
      "disabledFlag": false,
      "administratorFlag": true,
      "departmentName": "技术部",
      "createTime": "2021-08-11 10:04:53",
      "roleIdList": [1],
      "roleName": "技术总监"
    }
  ]
}
//----------operate--------------
function toEdite(){
  showList.value = false
}
function editeBack(){
  showList.value = true
}
function deleteAct(){

}
onMounted(ajaxQuery);
</script>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'user'
})
</script>